<html xmlns:th="http://www.thymeleaf.org" lang="en" >
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">
    <link rel="stylesheet" th:href="@{'/css/buttonStyle.css'}">
    <title>Parcel Registration</title>
</head>

<body style="background-color: #424564">

<!-- 导航栏 -->
<div class="container-fluid" style="
      background-color: rgb(245,245,245);">
    <div class="container">
        <nav class="navbar navbar-expand-lg">
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav mr-auto">
                    <div class="container">
                        <li class="nav-item">
                            <button type="button" id="parcelRegistration"
                                    class="btn btn-primary active" style="width: 200px; height:45px; font-size: large;">
                                Parcel Registration
                            </button>
                        </li>
                    </div>

                    <div class="container">
                        <li class="nav-item">
                            <button type="button" id="parcelManagement"
                                    class="btn btn-primary" style="width: 200px; height: 45px; font-size: large;">Parcel Management</button>
                        </li>
                    </div>

                    <div class="container">
                        <li class="nav-item">
                            <button type="button" class="btn btn-primary" id='parcelPost'
                                    style="width: 150px; height: 45px; font-size: large;">Mailing parcels</button>
                        </li>
                    </div>

                </ul>
                <form class="form-inline my-2 my-lg-0" th:if="${session['userId'] != null}">
                    <div class="btn-group dropleft">
                        <button type="button" class="btn btn-info dropdown-toggle"
                                style="width: 150px; height: 45px;" id="logout"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Log Out
                        </button>
                    </div>
                </form>
            </div>
        </nav>
    </div>
</div>


<!-- Logo栏 -->
<div class="container">
    <img th:src="@{'/images/logo_white.png'}"
         style="width:70%; margin-left: 15%; margin-top: 20px; margin-bottom: 10px; margin-top: 50px;" class="img-responsive center-block">
</div>


<!-- 包裹查询页面 -->
<div class="container" style="padding-bottom: 5%; ">
    <div class="row justify-content-center">
        <div class="col-lg-8  ">
            <div class="container bg-white" style="
                    border-style: solid;
                    border-width: 5px;
                    border-color: rgb(3, 14, 81);
                    padding-top: 30px;
                    padding-bottom: 30px;
                    margin-top: 50px;
                    border-radius: 15px;">
                <h3 class="text-center">
                    Parcel Registration
                </h3>
                <div class="alert alert-primary" id="msg" role="alert">
                </div>
                <div class="text-center" style="margin-bottom: 20px;">
                    Please enter tracking number
                </div>
                <!-- 输入包裹编号框 -->
                <div class="form-group">
                    <input class="form-control form-control-lg" type="text" placeholder="Ex. 12345567" id="trackingNumber"
                           style="margin-bottom: 20px;">
                    <div class="invalid-feedback">Please enter tracking number</div>
                </div>

                <!-- 输入包裹学生id框 -->
                <div class="text-center" style="margin-bottom: 20px;">
                    Enter the name of parcel owner
                </div>

                <!-- 学生id输入框 -->
                <div class="form-group">
                    <input class="form-control form-control-lg" type="text" placeholder="Enter Student Name"
                           id="consigneeName"
                           style="margin-bottom: 20px;">
                    <div class="invalid-feedback">No result has been found!</div>
                </div>
                <div class="text-center" style="margin-bottom: 20px;">
                    Please Select User
                </div>
                <select name="studentId" style="margin-bottom: 20px;" class="form-control form-control-l"
                        id="studentId">
                </select>
                <div id="resultText"></div>

                <div class="container d-flex justify-content-center">
                    <button type="button" class="btn btn-outline-info" style="text-align:center; width: 100px; font-size: 20; "
                            id="okButton">OK</button>
                </div>

            </div>
        </div>
    </div>
</div>



<!-- 页脚 -->
<footer class="container-fluid" style="background-color: rgb(51, 51, 51); padding-bottom: 50px; padding-top: 10px; ">
    <div class="container text-white text-center">
        <h4>XMUM STUDENT WORKS</h4>
    </div>
</footer>

<!-- Javascript -->
<script th:src="@{'/js/jquery-3.5.1.min.js'}"></script>
<script th:src="@{'/js/bootstrap.bundle.min.js'}"></script>
<!--名字查找-->
<script th:inline="javascript">
    $().ready(function () {
        //Javascript
        $("#studentId").hide()
        $('#consigneeName').blur(function () {
            $('#studentId').empty()
            if ($('#consigneeName').val() == "") {
                $('#consigneeName').addClass('is-invalid');
                $('#studentId').hide();
                return false;
            }
            //ajax 获得名字检索结果
            $.ajax({
                //请求方式
                type: "GET",
                //请求地址
                url: [[@{'/userInfo?fullName='}]] + $('#consigneeName').val(),

                //请求成功
                success: function (result) {
                    var html = "";
                    if (result.length > 0) {
                        console.log(result.length)
                        result.forEach(function (detail) {
                            html += "<option value=\"" + detail['userId'] + "\">" + detail['fullName'] + ' (ID: ' + detail['userId'] + " )</option>";
                        })
                    }
                    if (html === "") {
                        $('#consigneeName').addClass('is-invalid');
                        $('#studentId').hide();
                    } else {
                        $('#consigneeName').removeClass('is-invalid');
                        $('#studentId').show();
                    }
                    $('#studentId').append(html);
                    console.log(result)
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        })
    })
</script>
<!--表单提交-->
<script th:inline="javascript">
    $().ready(function () {
        $("#msg").hide()
        //Javascript
        //is-invalid
        //tracking number
        $("#trackingNumber").blur(function () {
            if ($('#trackingNumber').val() === "") {
                $("#trackingNumber").addClass("is-invalid");
            } else {
                $("#trackingNumber").removeClass("is-invalid");
            }
        })


        $('#okButton').click(function () {
            if($('#trackingNumber').val() === "" ||
                $('#studentId').val() === "" ||
                $("#studentId").val() === null) {
                return false;
            } else {
                $("#msg").show();
                $('#okButton').attr("disabled",true);
                $('#okButton').text("Submitting");
                var data = {
                    "userId": $("#studentId").val(),
                    "parcelId": null,
                    "trackingNumber": $("#trackingNumber").val(),
                    "consigneeId": null,
                };
                console.log(JSON.stringify(data));
                $.ajax({
                    //请求方式
                    type: "POST",
                    //请求地址
                    url: [[@{'/admin/addParcel'}]],
                    contentType: "application/json;charset=UTF-8",
                    data:  JSON.stringify(data),
                    //请求成功
                    success: function (result) {
                        $('#msg').text(result['msg']);
                        if(result['success']){
                            $('#okButton').hide();
                            setTimeout(function (){
                                window.location.reload();
                            },2000)
                        } else {
                            $('#okButton').attr("disabled",false);
                            $('#okButton').text("OK");
                        }

                        console.log(result)
                    },
                    //请求失败，包含具体的错误信息
                    error: function (e) {
                        $('#msg').text("Server Error!");
                        $('#okButton').attr("disabled",false);
                        $('#okButton').text("OK");
                        console.log(e.status);
                        console.log(e.responseText);
                    }
                })

            }
        })

        //click -> 框
        //click -> (null)
        //页面跳转
        $('#parcelRegistration').click(function () {
            window.location.href = [[@{'/admin/parcelReg'}]];
        })
        $('#parcelManagement').click(function (){
            window.location.href = [[@{'/admin/parcelManagement'}]];
        })

        $('#logout').click(function () {
            window.location.href = [[@{'/public/logout'}]]
        })
        $('#parcelPost').click(function () {
            window.location.href = [[@{'/comingSoon'}]];
        })
    })
</script>
</body>

</html>